<template>
	<view class="popup-picker">
		<!-- 普通弹窗 -->
		<uni-popup ref="popup" background-color="#fff" :type="type" @change="change" customClass="bgF">
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<picker-view class="picker-view" v-if="mode =='date'" indicator-style="height: 50px;" :immediate-change="true" mask-style="background:rgba(0,0,0,0)" :value="dateValue" @change="bindChange">
					<view class="center-bg"></view>
					<picker-view-column>
						<view class="item" v-for="(item,i) in years" :key="i" :style="{color:i==dateValue[0] ? '#333333' : '#999999'}">
							{{item}}年
						</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,i) in months" :key="i" :style="{color:i==dateValue[1] ? '#333333' : '#999999'}">
							{{item}}月
						</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,i) in days" :key="i" :style="{color:i==dateValue[2] ? '#333333' : '#999999'}">
							{{item+1}}日
						</view>
					</picker-view-column>
					
				</picker-view>
				
				<picker-view class="picker-view" :style="{height:PVheight}" v-else indicator-style="height: 50px;" :immediate-change="true" mask-style="background:rgba(0,0,0,0)" :value="pickerValue" @change="sexBindChange">
					<view class="center-bg"></view>
					<picker-view-column>
						<view class="item" v-for="(item,i) in range" :key="i" :style="{color:i==pickerValue[0] ? '#333333' : '#999999'}">
							{{item.text}}
						</view>
					</picker-view-column>
				</picker-view>
				
				<view class="button-b">
					<button @click="close">取消</button>
					<button @click="confirm">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "popup-picker",
		props:{
			type:{
				type:String,
				default:'center'
			},
			mode:{
				type:String,
				default:''
			},
			startTime:{
				type:String||Number,
				default:''
			},
			endTime:{
				type:String||Number,
				default:''
			},
			range:{
				type:Array,
				default:[]
			},
			PVheight:{
				type:String,
				default:'300rpx'
			}
		},
		data() {
			const years = [];
			const months = [];
			const days = [];
			if(this.startTime&&this.endTime){
				for (let i=this.$dayjs(this.startTime).format('YYYY');i<=this.$dayjs(this.endTime).format('YYYY');i++) {
					years.push(i)
				}
				for (let i=1;i<=this.$dayjs().daysInMonth();i++) {
					days.push(i)
				}
			}else{
				for (let i=1970;i<=2100;i++) {
					years.push(i)
				}
				
				for (let i=0;i<this.$dayjs().daysInMonth();i++) {
					days.push(i)
				} 
			}
			for (let i=1;i<=12;i++) {
				months.push(i)
			}
			
			return {
				years,
				months,
				days,
				dateValue:[],
				pickerValue:[],
				timeValue:''
			};
		},
		computed:{
		},
		created() {
			if(this.mode=='date'){
				this.initDate()
			}
		},
		methods:{
			initDate(){
				if(this.startTime&&this.endTime){
					this.dateValue[0] = this.$dayjs().format('YYYY') - this.$dayjs(this.startTime).format('YYYY')
				}else{
					this.dateValue[0] = this.$dayjs().format('YYYY') - 1970
				}
				this.dateValue[1] = Number(this.$dayjs().format('M'))-1
				this.dateValue[2] = Number(this.$dayjs().format('D'))-1
				
				this.timeValue = `${this.years[this.dateValue[0]]}-${this.months[this.dateValue[1]]}-${this.dateValue[2]+1}`
			},
			open(){
				this.$refs.popup.open()
			},
			close(){
				this.$refs.popup.close()
			},
			// popup change
			change(){},
			
			// picker change
			bindChange(val){
				this.dateValue = val.detail.value
				this.days = this.$dayjs(`${this.years[this.dateValue[0]]}-${this.months[this.dateValue[1]]}`).daysInMonth()
				this.timeValue = `${this.years[this.dateValue[0]]}-${this.months[this.dateValue[1]]}-${this.dateValue[2]+1}`
			},
			sexBindChange(val){
				this.pickerValue = val.detail.value
			},
			
			confirm(){
				this.$emit('change',this.mode != 'date' ? this.pickerValue : this.timeValue)
			}
		}
	}
</script>
<style>
	
	/deep/ .bgF{
		border-radius: 40rpx 40rpx 0 0;
	}
</style>
<style lang="scss" scoped>
	.popup-content{
		padding: 0 22rpx;
		box-sizing: border-box;
	}
	
	.picker-view {
		width: 100%;
		height: 510rpx;
		margin-top: 20rpx;
		position: relative;
		.center-bg{
			width: 100%;
			height: 102rpx;
			background-color: #F4F4F4;
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			z-index: 0;
			border-radius: 16rpx;
		}
	}
	/deep/ .item {
		line-height: 102rpx;
		text-align: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #333333;
		font-style: normal;
		text-transform: none;
	}
	.button-b{
		display: flex;
		justify-content: space-between;
		button{
			width: 300rpx;
			height: 82rpx;
			border-radius: 41rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			line-height: 82rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			&:first-child{
				background-color: #F5F5F5;
				color: #777777;
			}
			&:last-child{
				background: linear-gradient( 135deg, #FFA233 0%, #FB4C4C 100%);
				color: #FFFFFF;
				margin-left: 24rpx;
			}
		}
	}
	
</style>
